<template>
<view class="index">
	<view class="jtop">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="jtop_l" @tap="navigateBack"><image src="../../static/img/ic_back_white.png"></image></view>
		<!-- <view class="jtop_l" @tap="navigateBack">关闭</view> -->
		<view class="jtop_c">
			<view>
				2020年
			</view>
			
		</view>
		<view class="jtop_r" @tap="jshow_pop"><image src="../../static/img/ic_ellipsis_white.png"></image></view>
	</view>
	
	<view class="tophr"></view>
	
	<view class="cm_t">
		<view class="cm_tb">
			<view class="cm_tt">
				1月
			</view>
			<view class="cm_tt">
				2月
			</view>
			<view class="cm_tt">
				3月
			</view>
			<view class="cm_tt">
				4月
			</view>
			<view class="cm_tt">
				5月
			</view>
			<view class="cm_tt active">
				6月
			</view>
			<view class="cm_tt">
				7月
			</view>
			<view class="cm_tt">
				8月
			</view>
			<view class="cm_tt">
				9月
			</view>
			<view class="cm_tt">
				10月
			</view>
			<view class="cm_tt">
				11月
			</view>
			<view class="cm_tt">
				12月
			</view>
		</view>
	</view>
	
	<view class="cmt">
		上下班统计·次
	</view>
	<view class="cmb">
		<view class="cmbb">
			<view class="cmbbl">
			</view>
			<view class="cmbbr">
				正常20天
			</view>
		</view>
		<view class="cmbb">
			<view class="cmbbl2">
			</view>
			<view class="cmbbr">
				异常8天
			</view>
		</view>
	</view>
	
	<view class="clf">
		<view class="clfb">
			<view class="clfb_t">
				1
			</view>
			<view class="clfb_f">
				迟到
			</view>
		</view>
		<view class="clfb">
			<view class="clfb_t">
				10
			</view>
			<view class="clfb_f">
				早退
			</view>
		</view>
		<view class="clfb">
			<view class="clfb_t">
				0
			</view>
			<view class="clfb_f">
				旷工
			</view>
		</view>
		<view class="clfb">
			<view class="clfb_t">
				0
			</view>
			<view class="clfb_f">
				缺卡
			</view>
		</view>
		<view class="clfb">
			<view class="clfb_t">
				0
			</view>
			<view class="clfb_f">
				地点异常
			</view>
		</view>
		<view class="clfb">
			<view class="clfb_t">
				0
			</view>
			<view class="clfb_f">
				设备异常
			</view>
		</view>
	</view>
	
	
	<!-- 弹出层 -->
		<view :class="[ashowpop ? 'tc' : 'tc hide']">
			<view class="jtop_bj"  @click="jshow_pop"></view>
			
			<view class="tc_fbox">
				<view class="tc_fbox_bt2" @click="jshow_pop">
					生成本月考勤报表
				</view>
				<view class="tc_fbox_bt"  @click="jshow_pop">
					取消
				</view>
			</view>
	
		</view>
		
		
</view>	
</template>

<script>import request from '@/common/request.js'
    import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	export default {
        components:{
            RenCalendar
        },
		

		data() {
			return {
				repeat_click:true,
				curDate:'',
                markDays:['2020-08-01','2020-08-02','2020-08-03'],
				collapsible:false,
				ashowpop:false
			}
		},
		onReady() {
            let today = this.$refs.ren.getToday().date;
            this.curDate = today;
            this.markDays.push(today);
		},
		methods: {
			jshow_pop(){
				this.ashowpop = !this.ashowpop;
			},
		
			navigateBack(){
				uni.navigateBack()
			},
            onDayClick(data){
                this.curDate = data.date;
            }
		}
	}
</script>

<style>
.cmt{width: 690rpx;height: auto; display: block;float: left; margin:30rpx 30rpx 40rpx;color: #999999;font-size: 28rpx;line-height: 36rpx;}	
.cmb{width: 100%;height: auto; display: block;float: left; border-bottom: 1px solid #DDDDDD;}
.cmbb{width: auto;height: auto; display: block;float: left;margin:0rpx 40rpx 40rpx 120rpx;}
.cmbbl{width: 20rpx;height: 20rpx; border-radius: 20rpx; background:#256AFF; margin: 10rpx 10rpx 0 0;display: block;float: left;}
.cmbbl2{width: 20rpx;height: 20rpx; border-radius: 20rpx; background:#FFAA20; margin: 10rpx 10rpx 0 0;display: block;float: left;}
.cmbbr{width: auto;height: auto; display: block;float: left; margin:0rpx 0rpx 0rpx;color: #000000;font-size:34rpx;line-height: 42rpx;}

.clf{width: 90%;height: auto; display: block;float: left; margin:0rpx 5%;}
.clfb{width: 33%;height: auto; display: block;float: left;}
.clfb_t{width: 100%;height: auto; display: block;float: left; text-align: center; margin:50rpx 0rpx 0;color: #000000;font-size: 36rpx;line-height: 44rpx;}	
.clfb_f{width: 100%;height: auto; display: block;float: left; text-align: center; margin:10rpx 0rpx 0;color: #999999;font-size: 28rpx;line-height: 36rpx;}
	
	

.tc{width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index:10000; display: block;}
.jtop_bj{width: 100%; height: 100%; background: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; z-index:10000;}
.tc_fbox_bt{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-top: 20rpx solid #F2F2F2; background: #ffffff;}
.tc_fbox{ width: 100%; height: auto; display: block; float: left; background: #F2F2F2; position: fixed; left: 0; bottom: 0; z-index:10001; }
.tc_fbox_bt2{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-top: 0rpx solid #F2F2F2; background: #ffffff;}



	
.cm_t{width: 100%; height:160rpx ; background: #256AFF; display: block; float: left; overflow: overlay;}
.cm_tb{width: 1250rpx; height:auto ; display: block; float: left;margin:35rpx 40rpx; }
.cm_tt{width: 80rpx; height:auto ; border-radius: 80rpx ; line-height: 80rpx; text-align: center; font-size: 32rpx;color: #FFFFFF; display: block; float: left;margin:0 10rpx; }
.cm_tt.active{ background: #ffffff; color: #256AFF;}

.cf{ width: 100%;height: auto; display: block;float: left; border-bottom: 1px solid #DDDDDD;}
.cf_b{ width: 690rpx;height: auto; display: block;float: left; margin: 0 30rpx;}
.cf01{width: 100%; height: auto;  display: block;float: left;color: #000000;font-size: 28rpx;line-height: 36rpx; margin: 20rpx 0;}
.cf02{width: 100%; height: auto;  display: block;float: left;color: #999999;font-size: 24rpx;line-height: 32rpx; margin:0 0 20rpx ;}
.cf03{width: 100rpx; height: auto;  display: block;float: left;color: #000000;font-size: 34rpx;line-height: 32rpx; margin: 40rpx 40rpx 40rpx 0;}
.cf04{ width:500rpx;height: auto; display: block;float: left; margin: 0 0rpx;}
.cf04t{width: 100%; height: auto;  display: block;float: left;color: #000000;font-size: 28rpx;line-height: 36rpx; margin:20rpx 0 10rpx ;}
.cf04f{width: 100%; height: auto;  display: block;float: left;color: #999999;font-size: 24rpx;line-height: 32rpx; margin:0rpx 0 22rpx ;}



	.tophr{ width: 100%; height: 88rpx; }
	.uni-searchbar{box-shadow:none}
	.index{background: #ffffff;width: 100%; height: auto;}
	.jtop{ width: 100%; height: 88rpx; background: #256AFF; position: fixed; top: 0; left: 0; z-index: 1000;}
	.jtop_l{width: auto; height: 88rpx; display: block;float: left; font-size: 32rpx; color: #000000; line-height: 88rpx; margin: 0 0 0 30rpx;}
	.jtop_l image{width: 48rpx; height: 48rpx; display: block;float: left; margin: 20rpx 0 20rpx 0;}
	.jtop_lt{margin: 0 0 0 10rpx;}
	.jtop_r{width: 48rpx; color: #ffffff;text-align: right; height: 48rpx; display: block;float: right; margin: 20rpx 20rpx 0 0;}
	.jtop_rl{margin: 20rpx 30rpx 0 0;}
	.jtop_r image{width: 48rpx; height: 48rpx; display: block;float: left;}
	.jtop_c{width: 70%; height: 48rpx; line-height: 48rpx; display: block;float: left; position: fixed; top: 20rpx; left: 15%; text-align: center; font-size: 36rpx;color: #ffffff;}
	.jtop_c image{width: 36rpx; height: 36rpx; display: inline-block; float: none; margin-bottom: -5rpx; margin-left: 5rpx;}
	.jtop_b{width: 100%; height: auto; background: #ffffff; position: fixed; top:88rpx; left: 0; z-index: 1001;}
	.jtop_c1{ display: inline-block; margin: 0 20rpx; color: #ffffff;}
	.jtop_c1.active{color: #ffffff;}
	

</style>
